<template>
  <div class="edu-page-warp">
    <el-row :gutter="0">
      <el-col :span="12">
        <p v-if="id"
           class="section-title">编辑教育背景</p>
        <p v-else
           class="section-title">新建教育背景</p>
      </el-col>
    </el-row>
    <el-card shadow="never"
             body-style="padding: 24px;">
      <el-form ref="eduBackForm"
               :rules="rules"
               :model="eduBack"
               label-width="120px"
               label-position="left">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="毕业学校："
                          prop="graduateSchool">
              <el-input v-model="eduBack.graduateSchool" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学习形式："
                          prop="formLearning">
              <el-input v-model="eduBack.formLearning" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="毕业时间："
                          prop="educationName">
              <el-date-picker
                v-model="eduBack.educationName"
                type="datetime"
                placeholder="选择开始时间"
                format="yyyy/MM/dd HH:mm"
                value-format="timestamp"
                style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="专业名称："
                          prop="majorName">
              <el-input v-model="eduBack.majorName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学校单位名称："
                          prop="schoolUnitName">
              <el-input v-model="eduBack.schoolUnitName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学位专业名称："
                          prop="degreeMajorName">
              <el-input v-model="eduBack.degreeMajorName" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="hr"></div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="学位单位代码："
                          prop="majorCode">
              <el-input v-model="eduBack.majorCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="毕业学校代码："
                          prop="graduateSchoolCode">
              <el-input v-model="eduBack.graduateSchoolCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学位代码："
                          prop="degreeCode">
              <el-input v-model="eduBack.degreeCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="8">
            <el-form-item label="毕业时间：" prop="educationName">
              <el-date-picker
                v-model="eduBack.educationName"
                type="datetime"
                placeholder="选择开始时间"
                format="yyyy/MM/dd HH:mm"
                value-format="timestamp"
                style="width: 100%"/>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="毕业证书编号："
                          prop="diplomaNumber">
              <el-input v-model="eduBack.diplomaNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培养层次代码："
                          prop="cultureLevel">
              <el-input v-model="eduBack.cultureLevel" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="门类代码："
                          prop="categoryCode">
              <el-input v-model="eduBack.categoryCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="text-right">
          <el-button @click="resetFrm('eduBackForm')">取消</el-button>
          <el-button type="primary"
                     @click="onSubmit('eduBackForm')">保存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import eduBack from 'common/src/api/studentEduBackg'
import { mapState } from 'vuex'

export default {
  name: 'create-edu-back',
  data() {
    return {
      eduBack: {
        studentId: '',
        graduateSchool: '',
        graduateSchoolCode: '',
        graduateDate: '',
        formLearning: '',
        majorName: '',
        schoolUnitCode: '',
        majorCode: '',
        schoolUnitName: '',
        degreeMajorName: '',
        degreeCode: '',
        degreeDate: '',
        educationName: '',
        diplomaNumber: '',
        cultureLevel: '',
        categoryCode: ''
      },
      id: '',
      fromUrl: '',
      rules: {
        graduateSchool: [
          { required: true, message: '请输入毕业学校', trigger: 'blur' }
        ],
        graduateDate: [
          { required: true, message: '请输入毕业时间', trigger: 'blur' }
        ],
        formLearning: [
          { required: true, message: '请输入学习形式', trigger: 'blur' }
        ],
        majorName: [
          { required: true, message: '请输入专业名称', trigger: 'blur' }
        ],
        schoolUnitName: [
          { required: true, message: '请输入学校单位名称', trigger: 'blur' }
        ],
        degreeMajorName: [
          { required: true, message: '请输入学位专业名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      mockUser: state => state.session.mockUser
    })
  },
  watch: {
    $route(to, from) {
      this.fromUrl = from.fullPath
    }
  },
  created() {
    if(this.$route.params.uid) {
      this.eduBack.studentId = this.$route.params.uid
    } else {
      this.eduBack.studentId = this.mockUser ? this.mockUser.uid : localStorage.getItem('uid')
    }
    this.id = this.$route.params.id
    if (this.id) {
      eduBack.findEduBackgroud(this.id).then(res => {
        if (res && res.code === 200) {
          this.eduBack = res.data
        }
      })
    } else {
      this.id = ''
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.id) {
            this.eduBack.id = this.id
            eduBack.updateEduBackgroud(this.eduBack).then(res => {
              if (res && res.code === 200) {
                this.$message({
                  message: '恭喜你成功修改一条教育背景',
                  type: 'success'
                })
                this.$router.push(this.fromUrl)
              }
            })
          } else {
            eduBack.addEduBackgroud(this.eduBack).then(res => {
              if (res && res.code === 200) {
                this.$message({
                  message: '恭喜你成功添加一条教育背景',
                  type: 'success'
                })
                this.$router.push(this.fromUrl)
              }
            })
          }
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      // this.$store.commit("delete_tabs", this.$route.path);
      this.$refs[formName].resetFields()
      this.$router.push(this.fromUrl)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
